<template>
  <div class="list">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item.id" class="item-container">
        <section class="item">
          <img class="img" src="../assets/image/pic1.png"/>
          <aside class="item-aside">
            <div class="mark mark-cast"></div>
            <div class="mark mark-exchange"></div>
          </aside>
          <header>
            <div class="logos"></div>
            <div class="atlas"></div>
          </header>
          <p class="title">{{item.name}}</p>
          
          <footer>
            <div class="foot-info">
              <span class="index">#129</span>
              <span class="d23 d2"></span>
            </div>
            <!-- <span class="btn">下架</span> -->
          </footer>
        </section>
      </van-cell>
    </van-list>
  </div>
</template>
<style scoped>
  
  .van-cell:after{
    border-bottom: none !important;
  }
  .list{
  }    
  .van-cell{
    padding: 0;
    background-color: inherit;
  }
  .item{
    width: 182px;
    height: 240px;
    margin: auto;
    position: relative;

  }
  .item-aside{
    position:absolute;
    top: 95px;
    right:1px;
  }
  .mark{
    width: 29px;
    height: 27px;
    background-size: 29px 27px;
    background-repeat: no-repeat;
    /*  no-repeat ; */
  }
  .mark-cast{
    background-image: url(../assets/image/cast.png);
  }
 
  .mark-exchange{
    background-image: url(../assets/image/exchange.png);
  }
  .index{
    color: #fff;
  }

  .d23{
    width: 23px;
    height: 23px;
    background-size: 23px 23px;
    background-repeat: no-repeat;
    /*  no-repeat ; */
  }
  .d23.d2{
    background-image: url(../assets/image/2d.png);
  }
 
  .d23.d3{
    background-image: url(../assets/image/3d.png);
  }

  .img{
    width: 182px;
    height: 182px;
  }

  .title{
    position: absolute;
    top: 142px;
    right: 0;
    left: 0;
    text-align: center;
    color: white;
  }

  .logos{
    width: 48px;
    position: absolute;
    top:8px;
    left:8px;
    height: 17px;
    background: url('../assets/image/tag1.png');
    background-size: 48px 17px;
    background-repeat: no-repeat;
  }
  
  .atlas{
    width: 25px;
    height: 25px;
    position: absolute;
    top:8px;
    right:8px;
    background: url('../assets/image/atlas.png');
    background-size: 25px 25px;
    background-repeat: no-repeat;
  }
  .foot-info{
    display: flex;
    justify-content: space-between;
  }
  .van-list{
    display: flex;
    flex-wrap: wrap;
  }
  .item-container{
    width: 50%;
  }
  footer{
    height: 95px;
    background-color: blue;
  }
  .btn{
    margin-left: auto;
    width: 38px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background: rgb(227, 81, 81);
    border-radius: 4px;
    font-size: 12px;
  }
</style>
<script setup lang="ts">

  import { ref } from 'vue';
  import { defineProps} from 'vue'
import { getList } from '../api/list';
import { Item } from '../data';
  const props = defineProps<{typeId: Number}>()

  const list = ref<Item[]>([]);
  const loading = ref(false);
  const finished = ref(false);
  console.log(props.typeId)
  const onLoad = async () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    const { data } = await getList()
    list.value.push(...data)
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 40) {
      finished.value = true;
    }
    // setTimeout(() => {
      
    //   for (let i = 0; i < 10; i++) {
    //     list.value.push(list.value.length + 1);
    //   }

    //   // 加载状态结束
    // }, 1000);
  }
</script>